<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>抓美女</title>
    <style>
		#box{
			width:150px;
			height:100px;
			position:absolute;
			left:900px;
			top:200px;
		}
		#box a{
			display:block;
			width:10px;
			height:10px;
			font-size:20px;
			position:absolute;
			right:10px;
			top:0px;
			z-index:1;
			font-family:'Comic Sans MS';
			text-decoration:none;
			color:#fff;
		}
    	#box .meinv{
			width:150px;
			height:100px;
			position:absolute;
			left:0;
			top:0;
		}
		#h{
			height:1300px;
		}
		
    </style>
	<script type="text/javascript">
	window.onload = function(){
    	//获取节点
		var d = document.getElementById("box");
		var close = document.getElementById("close");
		
		//获取图片的宽高
		var w = getStyle(d,'width');
		var h = getStyle(d,'height');
		
		//获取屏幕的宽高
		var clientWidth = document.documentElement.clientWidth;
		var clientHeight = document.documentElement.clientHeight;
		
		//计算让图片不要超出可视区，-1，解决闪动滚动条BUG
		var r_w = clientWidth - parseInt(w)-1;
		var r_h = clientHeight - parseInt(h)-1;
		
		//移动方向控制开关
		var moveLeft = true;
		var moveTop = true;
		
		//定时器开关
		var timer;
		
		//定时器状态
		var timerFalg = true;
		
		//移动图片方法
		moveImg();	
		
		//封装图片移动方法
		function moveImg(){
			
			clearInterval(timer);	
			//给图片增加定时器
			timer = setInterval(function(){
				//获取滚动条高度
				var scrollTop = document.documentElement.scrollTop;
				
				//获取图片元素的left + top
				var left = parseInt(getStyle(d,'left'));
				var top = parseInt(getStyle(d,'top'));
				
				//如果left < 0 证明已经到达屏幕最左边
				//如果left > 屏幕宽度-图片宽度，证明到达屏幕最右边
				
				if( left < 0){
					moveLeft = true;
				}else if( left > r_w){
					moveLeft = false;
				}
				if( moveLeft ){
					left++;	
				}else{
					left--;
				}
				
				//如果top < 0 证明已经到达屏幕最上边
				//如果top > 屏幕宽度-图片宽度，证明到达屏幕最下边
				if( top < 0+scrollTop ){
					moveTop = true;
				}else if( top > r_h+scrollTop ){
					moveTop = false;
					
				}
				if( moveTop ){
					top++;	
				}else{
					top--;
				}
				
				d.style.left = left+'px';
				d.style.top = top+'px';
			},10);
		}
		
		
		//鼠标移动到图片时，停止图片飘动效果
		d.onmouseover = function(){
			clearInterval(timer);	
		}
		
		//鼠标移开时执行移动方法
		d.onmouseout = function(){
			if(timerFalg){
				moveImg();	
			}
		}
		
		//关闭漂浮图片
		close.onclick = function(){
			d.style.display = 'none';	
			//改变定时器开关状态
			timerFalg = false;
			//清除定时器
			clearInterval(timer);	
		}
				
		
		
		
		
		//封装获取潜入样式方法
		function getStyle(obj,attr){
			if(document.all){
			
				return obj.currentStyle[attr];	
			}else{
				return getComputedStyle(obj,null)[attr];
			}	
		}
	}
    </script>
</head>
<body>
	<div id="box">
    	<a href="javascript:;" id="close">X</a>
    	<img src="meinv.jpg" class="meinv"/>
    </div>
    <div id="h"></div>
</body>
</html>






